package com.example.disanjieke

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.clickable
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.disanjieke.ui.theme.DisanjiekeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DisanjiekeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    DiceGalleryApp(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

// 骰子数据类
data class DiceImage(
    val imageRes: Int,
    val title: String,
    val value: Int
)

@Composable
fun DiceGalleryApp(modifier: Modifier = Modifier) {
    // 骰子图片数据
    val diceImages = listOf(
        DiceImage(imageRes = R.drawable.dice_1, title = "第一张图片", value = 1),
        DiceImage(imageRes = R.drawable.dice_2, title = "第二张图片", value = 2),
        DiceImage(imageRes = R.drawable.dice_3, title = "第三张图片", value = 3),
        DiceImage(imageRes = R.drawable.dice_4, title = "第四张图片", value = 4)
    )

    var currentDiceIndex by remember { mutableStateOf(0) }
    val currentDice = diceImages[currentDiceIndex]

    Box(
        modifier = modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(Color(0xFFEEEEEE), Color(0xFFBBBBBB))
                )
            )
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            // 添加一些顶部间距，将图片往下移
            Spacer(modifier = Modifier.height(32.dp))

            // 骰子图片和文字显示区域
            Surface(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(16.dp)),
                shadowElevation = 8.dp,
                color = Color(0xFF5C6BC0)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // 骰子图片显示
                    Box(
                        modifier = Modifier
                            .size(300.dp)
                    ) {
                        Image(
                            painter = painterResource(id = currentDice.imageRes),
                            contentDescription = "Dice showing ${currentDice.value}",
                            modifier = Modifier.fillMaxSize(),
                            contentScale = ContentScale.Fit
                        )

                        // 骰子点数指示器
                        Box(
                            modifier = Modifier
                                .align(Alignment.TopEnd)
                                .background(
                                    color = Color.Black.copy(alpha = 0.6f),
                                    shape = RoundedCornerShape(50)
                                )
                                .padding(horizontal = 12.dp, vertical = 6.dp)
                        ) {
                            Text(
                                text = "${currentDiceIndex + 1}/${diceImages.size}",
                                color = Color.White,
                                fontSize = 16.sp,
                                fontWeight = FontWeight.Medium
                            )
                        }
                    }

                    // 骰子信息区域
                    Text(
                        text = currentDice.title,
                        style = MaterialTheme.typography.headlineSmall,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center,
                        color = Color.White,
                        modifier = Modifier.padding(top = 24.dp, bottom = 8.dp)
                    )
                }
            }

            // 缩略图导航区域
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                diceImages.forEachIndexed { index, dice ->
                    Surface(
                        modifier = Modifier
                            .size(60.dp)
                            .padding(4.dp)
                            .clickable { currentDiceIndex = index },
                        shape = RoundedCornerShape(8.dp),
                        shadowElevation = if (index == currentDiceIndex) 4.dp else 0.dp
                    ) {
                        Box(
                            modifier = Modifier
                                .fillMaxSize()
                                .background(if (index == currentDiceIndex) Color(0xFF5C6BC0) else Color.White)
                        ) {
                            Image(
                                painter = painterResource(id = dice.imageRes),
                                contentDescription = null,
                                modifier = Modifier
                                    .fillMaxSize()
                                    .padding(8.dp),
                                contentScale = ContentScale.Fit
                            )
                        }
                    }
                }
            }

            // 底部按钮区域
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 32.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                // Previous 按钮
                Button(
                    onClick = {
                        currentDiceIndex = if (currentDiceIndex - 1 >= 0) {
                            currentDiceIndex - 1
                        } else {
                            diceImages.size - 1 // 循环到最后一张
                        }
                    },
                    modifier = Modifier
                        .width(120.dp)
                        .height(50.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color(0xFF5C6BC0)
                    ),
                    shape = RoundedCornerShape(12.dp)
                ) {
                    Text(
                        text = "上一张",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Medium
                    )
                }

                // Next 按钮
                Button(
                    onClick = {
                        currentDiceIndex = (currentDiceIndex + 1) % diceImages.size
                    },
                    modifier = Modifier
                        .width(120.dp)
                        .height(50.dp),
                    colors = ButtonDefaults.buttonColors(
                        containerColor = Color(0xFF5C6BC0)
                    ),
                    shape = RoundedCornerShape(12.dp)
                ) {
                    Text(
                        text = "下一张",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Medium
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun DiceGalleryAppPreview() {
    DisanjiekeTheme {
        DiceGalleryApp()
    }
}